[자바스크립트] 배열 메소드 entries() 알아보기

Last Modified : 2020-06-15 / Created : 2020-04-27

5,182
View Count

주소 복사하기

자바스크립트 배열 타입에 사용하는 entries() 메소드에 대하여 알아봅니다.

# 자바스크립트 entries() 메소드 알아보기

배열에 사용 가능한 다양한 메소드 들이 존재하죠. 그 중에 entries()에 대하여 알아보려고 합니다.

참고로 객체에도 entries()가 존재합니다. 객체의 entries()는 배열과 비슷하게 모든 프로퍼티를 key, value로 반환하죠. 함께 알아두시면 좋습니다. 아래 링크를 참고하세요.
https://webisfree.com/2019-06-18/자바스크립트-object-메소드-entries()-알아보기

! entries()는?

배열에 사용하는 반복자(interator)로 실행하면 반복자 객체를 반환합니다. 이 반복자 객체를 사용하여 내부의 값들을 돌면서 키(key)와 밸류(value)를 얻을 수 있습니다. 아래는 간단한 문법입니다.

array.entries()

실행할 때 선택하는 옵션 등이 존재하지 않습니다. 그럼 어떻게 사용하는 지 알아보겠습니다.

먼저 위에서 얘기한 것처럼 반환된 반복자 객체를 가지고 키와 밸류를 얻을 수 있습니다. 그리고 다음 배열 값으로 이동하기 위해서 next()를 사용합니다.

.next()
// 실행하면 다음 값으로 이동

그럼 간단한 예제를 살펴볼까요?

# 자바스크립트 배열 entries() 예제보기

일단 아래의 변수 sites를 가지고 key와 value를 각각 콘솔에 출력해보려고 합니다.

sites = [
'siteA',
'siteB',
'siteC'
];

sites_iterator = sites.entries(); // 반복자 객체를 변수에 저장

이제 키, 밸류를 배열로 반환하는지 확인해보겠습니다.

console.log(sites_iterator.next())

// 아래는 출력값
done: false,
value: [ 0, "siteA" ]

보시는 것처럼 done과 value 두 가지 값을 반환합니다. 여기서 done은 모든 배열을 다 반환할 때 true를 아니면 false를 반환합니다. 그리고 value를 보면 순서값 index와 그 값을 반환하죠.

그럼 다음 값을 알아보기 위해 동일하게 실행해봅니다.

console.log(sites_iterator.next())
console.log(sites_iterator.next())
console.log(sites_iterator.next())

// 첫 번째 출력값
done: false,
value: [ 1, "siteB" ]

// 두 번째 출력값
done: false,
value: [ 2, "siteC" ]

// 세 번째 출력값
done: true,
value: undefined

예상한 것처럼 모두 출력한 후에는 done은 true를 반환합니다.

여기까지 배열에 사용하는 entries() 메소드에 대하여 간단하게 알아봤습니다.

일반적으로 동시에 모든 루프를 실행하기 위해서는 map, forEach, for 등이 많이 사용되어 실제로 사용 빈도는 조금 낮습니다. 다만 단계적으로 또 순서대로 값을 찾거나 얻기 위한 경우 유용하게 사용할 수 있겠습니다.

배열 array entries

아래의 글도 찾고 계시지 않나요?

[Typescript] 1편. 짧고 쉽게 타입스크립트 이해하기

next.js 서버사이드 렌더링을 위한 React Framework